<template>
	<view>
		<view class="content" v-if="cardGoodsList.length == 0">
			<view class="">
				<image src="http://www.szzn.group/uploads/20221107/31a09886ecb0d55f8cfe5b6b04b5fb9b.png" mode=""></image>
				<view class="" @click="goClass">随便逛逛</view>
			</view>

			<view class="">
				<view class="duiqi">
					<text class="little"></text>
					<text class="middle"></text>
					<text class="big"></text>
					<text class="tuijian">为你推荐</text>
					<text class="big"></text>
					<text class="middle"></text>
					<text class="little"></text>
				</view>
				<view class="">
					<view class="" v-for="(i, index) in tuijianList" :key="i" @click="goShoppingDetail(i.id)">
						<view class=""><image :src="i.image" mode=""></image></view>
						<view class="">
							<view class="title-name">{{ i.store_name }}</view>
							<view class="lijian">{{ i.store_info }}</view>
							<view class="">
								<view class="">
									<text>￥</text>
									{{i.price}}
									<text></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="shoppingcount" v-if="cardGoodsList.length != 0">
			<view class="">共{{ countLength }}件商品</view>
			<view v-if="deleteshopping" class="editshopping" @click="allCardDelete">删除</view>
		</view>
		<view class="catContent">
			<view class="allselect" v-if="cardGoodsList.length != 0"><van-checkbox checked-color="#3db963" :value="checkAll" @change="handleCheckAll">全选</van-checkbox></view>
			<view class="cards" v-if="cardGoodsList.length != 0">
				<view class="checkedStyle" v-for="(i, inx) in cardGoodsList" :key="inx">
					<view class="">
						<view class="storeName" v-if="i.suppliers.length != 0">
							<van-checkbox
								:value="checkedMerchants.indexOf(i.suppliers.id) != -1"
								checked-color="#3db963"
								:name="i.suppliers.id"
								@change="handleClickMerchantCheckBox(i.suppliers.id)"
								:key="i.suppliers.id"
							>
								<image class="storeImage" src="http://www.szzn.group/uploads/20221107/227f9c901202e18708a0c2e351894951.png" mode=""></image>
								<text>{{ i.suppliers.title }}</text>
							</van-checkbox>
						</view>
						<van-swipe-cell class="card" :right-width="65" :name="item.id" :key="index" v-for="(item, index) in i.cartInfo">
							<view class="chengboxs">
								<van-checkbox
									checked-color="#3db963"
									:name="item.id"
									:key="item.id"
									:value="checkBox.indexOf(item.id) != -1"
									@change="handleCardChange(item)"
								></van-checkbox>
							</view>
							<van-card class="goods-card">
								<view slot="title">
									<view class="shopping-title">{{ item.productInfo.store_name }}</view>
								</view>

								<view slot="desc">
									<view class="shopping-desc">
										<view class="">{{ item.is_spec == 0 ? item.productInfo.store_info : item.spec.sku }}</view>
									</view>
								</view>

								<view slot="price">
									<view class="shopping-price">￥{{ item.is_spec == 0 ? item.productInfo.price : item.spec.price }}</view>
								</view>

								<view slot="bottom">
									<view class="vip-price">￥{{ item.is_spec == 0 ? item.productInfo.vip_price : item.spec.vip_price }}</view>
								</view>

								<view slot="price-top">
									<view class="shopping-price-top">
										<view class="gift">礼物</view>
										<view class="exemption">包邮</view>
										<view class="wuzhe">五折</view>
									</view>
								</view>
								<view slot="num">
									<view class="count">x{{ item.cart_num }}</view>
								</view>
								<view slot="thumb">
									<image @click="goShoppingDetail(item.productInfo.id)" class="shopping-image" :src="item.productInfo.image" mode=""></image>
								</view>

								<view slot="footer">
									<van-button icon="minus" :key="item" @click="numReduce(item.id)" size="mini"></van-button>
									<van-button class="right-jia" color="#289958" :key="item" @click="numIncrease(item.id)" size="mini" icon="plus"></van-button>
								</view>
							</van-card>
							<view slot="right" @click="cardDelete(index, item.id, i.cartInfo)" class="delete-button">
								<image src="http://www.szzn.group/uploads/20221107/44eb3f43e50ab79454808e7b9325aa53.png" mode=""></image>
							</view>
						</van-swipe-cell>
					</view>
				</view>

				<view class="submitBar">
					<van-submit-bar :price="totalPrice" button-text="去结算" @submit="onClickButton" :tip="true">
						<van-checkbox checked-color="#3db963" :value="checkAll" @change="handleCheckAll">全选</van-checkbox>
					</van-submit-bar>
				</view>
			</view>
		</view>
		<tabbar @selectTabbar="selectTabbar" ref="tabbar"></tabbar>
	</view>
</template>
<script>
import tabbar from '@/components/tabBar/tabBar.vue';
import { getShoppingCartData, deteleShoppingCartData, updateShoppingCount, shoppingRecommend, getUserData } from '@/api/api.js';
export default {
	components: {
		tabbar
	},
	data() {
		return {
			// top:0,
			//总价
			totalPrice: 0,
			deleteshopping: false,
			checked: false,
			checkAll: false,
			cardChecked: true,
			isshopping: false,
			//购物车所有商品id
			cartGoodsIds: [],
			//购物车所有商户id
			cartMerchantIds: [],
			//商品列表
			goodsList: {},
			checkBoxs: [],
			checkedMerchants: [],
			checkBox: [],
			checkedStore: [],
			cardGoodsList: [], //商品列表
			tuijianList: [], //推荐商品,
			countLength: 0,
			aa: '',
			userdata: {} //用户信息
		};
	},
	// 分享
	onShareAppMessage() {
		return {
			title: '优栽园',
			path: 'pages/shoppingcart/index/index'
		};
	},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: '优栽园',
			path: 'pages/shoppingcart/index/index'
		};
	},
	onLoad() {},
	onShow() {
		uni.showLoading({})
		if (uni.getStorageSync('token') == '' || uni.getStorageSync('token') == null) {
			uni.reLaunch({
				url: '/page_login/index/index'
			});
			return;
		}
		this.checkBox = [];
		this.cartGoodsIds = [];
		this.cartMerchantIds = [];
		this.checkAll = false;
		this.checkedMerchants = [];
		this.totalPrice = 0;
		this.$refs.tabbar.current = 3;
		this.getShoppingCartData();
		// this.getGoodsList();
		this.shoppingRecommend();
		this.getUserData();
	},
	watch: {
		checkBox(a) {
			if (a.length >= 2) {
				this.deleteshopping = true;
			} else {
				this.deleteshopping = false;
			}
		}
	},
	computed: {},
	methods: {
		getUserData() {
			getUserData().then(res => {
				this.userdata = res.data.data;
			});
		},

		countTotalPrice() {
			var totalPrice = 0;
			this.checkBox.forEach(item => {
				var goods = this.goodsList[item];
				if (this.userdata.level > 0) {
					totalPrice += parseFloat(goods.is_spec == 0 ? goods.productInfo.vip_price : goods.spec.vip_price) * parseInt(goods.cart_num);
				} else {
					totalPrice += parseFloat(goods.is_spec == 0 ? goods.productInfo.price : goods.spec.price) * parseInt(goods.cart_num);
				}
			});

			this.totalPrice = totalPrice * 100;
		},
		updateAllCheckBoxState() {
			//判断子项是否都已选中
			var checkedAll = true;

			for (var merchantId in this.cartMerchantIds) {
				var merchantChecked = true;

				this.cartMerchantIds[merchantId].forEach(item => {
					merchantChecked = merchantChecked && this.checkBox.indexOf(parseInt(item)) != -1;
				});

				//先删除当前选中状态(无论是否选中)
				var index = this.checkedMerchants.indexOf(parseInt(merchantId));
				if (index != -1) {
					this.checkedMerchants.splice(index, 1);
				}

				if (merchantChecked) {
					this.checkedMerchants.push(parseInt(merchantId));
				}

				checkedAll = checkedAll && merchantChecked;
			}

			for (var i in this.cartMerchantIds) {
				checkedAll = checkedAll && this.checkedMerchants.indexOf(parseInt(i)) != -1;
			}
			this.checkAll = checkedAll;

			this.countTotalPrice();
		},
		handleCheckAll() {
			//选中切换到未选中
			if (this.checkAll) {
				this.checkBox = [];
				this.checkedMerchants = [];
				this.checkAll = false;
			} else {
				this.checkBox = this.cartGoodsIds;
				this.checkAll = true;

				for (var merchantId in this.cartMerchantIds) {
					var index = this.checkedMerchants.indexOf(merchantId);
					if (index != -1) {
						this.checkedMerchants.splice(index, 1);
					}
					this.checkedMerchants.push(parseInt(merchantId));
				}			}

			this.updateAllCheckBoxState();
		},
		//按商户全选
		handleClickMerchantCheckBox(id) {
			var index = this.checkedMerchants.indexOf(id);
			// 切换到未选中
			if (index != -1) {
				this.checkAll = false;
				this.checkedMerchants.splice(index, 1);

				this.cartMerchantIds[id].forEach(item => {
					this.checkBox.splice(this.checkBox.indexOf(item), 1);
				});
			} else {
				this.checkedMerchants.push(parseInt(id));

				this.cartMerchantIds[id].forEach(item => {
					this.checkBox.push(parseInt(item));
				});
				for (var i = 0; i < this.checkBox.length; i++) {
					for (var j = 0; j < this.checkBox.length; j++) {
						if (this.checkBox[i] == this.checkBox[j] && i != j) {
							//将后面重复的数删掉
							this.checkBox.splice(j, 1);
						}
					}
				}
			}

			this.updateAllCheckBoxState();
		},
		//商品单选事件
		handleCardChange(item) {
			var index = this.checkBox.indexOf(item.id);
			// 切换到未选中
			if (index != -1) {
				this.checkBox.splice(index, 1);
			} else {
				this.checkBox.push(parseInt(item.id));
			}
			this.updateAllCheckBoxState();
		},
		// 获取购物车数据
		getShoppingCartData() {
			this.countLength = 0;
			getShoppingCartData().then(res => {
				if (res.data.code == '200') {
					uni.hideLoading()
					this.cardGoodsList = res.data.data;
					for (var i in this.cardGoodsList) {
						var listGoods = this.cardGoodsList[i].cartInfo;
						for (var j in listGoods) {
							this.countLength++;
							if (typeof this.cartMerchantIds[listGoods[j].suppliers_id] == 'undefined') {
								this.cartMerchantIds[listGoods[j].suppliers_id] = [];
							}
							this.cartGoodsIds.push(parseInt(listGoods[j].id));
							this.cartMerchantIds[listGoods[j].suppliers_id].push(parseInt(listGoods[j].id));
							this.goodsList[parseInt(listGoods[j].id)] = listGoods[j];
						}
					}
				} else {
					uni.hideLoading()
					let time = setTimeout(()=>{
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon:'error'
						});
						clearTimeout(time)
					},800)
					
				}
			});
		},
		// 推荐商品
		shoppingRecommend() {
			shoppingRecommend().then(res => {
				this.tuijianList = res.data.data.slice(0, 4);
			});
		},
		//计算价格
		formatPrice(price) {
			return (price / 100).toFixed(2);
		},
		//增加数量
		numIncrease(id) {
			for (var j = 0; j < this.cardGoodsList.length; j++) {
				for (var i = 0; i < this.cardGoodsList[j].cartInfo.length; i++) {
					if (this.cardGoodsList[j].cartInfo[i].id == id) {
						this.cardGoodsList[j].cartInfo[i].cart_num++;
						let data = `cartId=${this.cardGoodsList[j].cartInfo[i].id}&cartNum=${this.cardGoodsList[j].cartInfo[i].cart_num}`;
						updateShoppingCount(data).then(res => {});
					}
				}
			}
			this.countTotalPrice();
		},
		//减少数量
		numReduce(id) {
			for (var j = 0; j < this.cardGoodsList.length; j++) {
				for (var i = 0; i < this.cardGoodsList[j].cartInfo.length; i++) {
					if (this.cardGoodsList[j].cartInfo[i].id == id && this.cardGoodsList[j].cartInfo[i].cart_num > 1) {
						
						this.cardGoodsList[j].cartInfo[i].cart_num--;
						let data = `cartId=${this.cardGoodsList[j].cartInfo[i].id}&cartNum=${this.cardGoodsList[j].cartInfo[i].cart_num}`;
						updateShoppingCount(data).then(res => {
						
						});
					}
				}
			}
			this.countTotalPrice();
		},
		//提交事件
		onClickButton() {
			if (this.checkBox.length == 0)
				return uni.showToast({
					title: '请选择要结算的商品',
					duration: 1200
				});
			uni.navigateTo({
				url: `/page_shoppingcart/submitorder/submitorder?cardId=${this.checkBox}`
			});
		},
		// 切换tabbar
		selectTabbar(e) {
			uni.switchTab({
				url: e.pagePath
			});
		},
		//删除商品事件
		cardDelete(index, id, item) {
			let that = this;
			let data = {
				ids: id
			};
			uni.showModal({
				title: '提示',
				content: '确定要删除该商品',
				success: function(res) {
					if (res.confirm) {
						deteleShoppingCartData(data).then(res => {
							if (res.data.code == '200') {
								uni.showToast({
									title: '删除成功',
									duration: 2000
								});
								that.cardGoodsList.splice(index, 1);
								that.countTotalPrice();
								that.getShoppingCartData();

								that.checkBox = [];
								that.cartGoodsIds = [];
								that.cartMerchantIds = [];
								that.checkAll = false;
								that.checkedMerchants = [];
								that.totalPrice = 0;
							} else {
								uni.showToast({
									title: '删除失败',
									duration: 2000,
									icon:'error'
								});
							}
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		// 删除多选商品事件
		allCardDelete() {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '确定要删除多个商品',
				success: function(res) {
					if (res.confirm) {
						let data = {
							ids: that.checkBox + ''
						};
						deteleShoppingCartData(data).then(res => {
							if (res.data.code == '200') {
								uni.showToast({
									title: '删除成功',
									duration: 2000
								});
								for (let i = 0; i < that.checkBox.length; i++) {
								
									for (let j = 0; j < that.cardGoodsList.length; j++) {
										
										if (that.checkBox[i] == that.cardGoodsList[j].id) {
											
											let indexs = that.cardGoodsList.indexOf(that.cardGoodsList[j]);
											that.cardGoodsList.splice(indexs, 1);
										}
									}
								}
								that.getShoppingCartData();
								that.totalPrice = '';
								that.countTotalPrice();

								that.checkBox = [];
								that.cartGoodsIds = [];
								that.cartMerchantIds = [];
								that.checkAll = false;
								that.checkedMerchants = [];
								that.totalPrice = 0;
							} else {
								uni.showToast({
									title: '删除失败',
									duration: 2000,
									icon:'error'
								});
							}
						});
						uni.showToast({
							title: '删除成功',
							duration: 2000
						});
						that.checkBox = [];
						that.deleteshopping = false;
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		goShoppingDetail(id) {
			uni.navigateTo({
				url: '/page_home/agriculturaldetail/agriculturaldetail?id=' + id
			});
		},
		goClass() {
			uni.switchTab({
				url: '/pages/classify/index/index'
			});
		}
	}
};
</script>
<style lang="scss">
.content {
	> view:nth-child(1) {
		height: 700rpx;
		background-color: #fff;
		text-align: center;

		> view {
			color: #fff;
			padding: 15rpx 40rpx;
			margin: 40rpx 180rpx;
			background-color: #289958;
			border-radius: 50px;
			font-size: 28rpx;
		}
	}

	> view:nth-child(2) {
		background-color: #fafafa;
		text-align: center;
		padding: 40rpx 0;

		> view:nth-child(1) {
			margin-bottom: 40rpx;
		}

		> view:nth-child(2) {
			padding: 0 20rpx 100rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			> view {
				width: 342rpx;
				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 1px 5px 1px #ddd;

				> view:nth-child(1) {
					image {
						width: 342rpx;
						height: 340rpx;
						border-radius: 18rpx 18rpx 0 0;
						display: block;
					}
				}

				> view:nth-child(2) {
					padding: 20rpx 15rpx;
					text-align: left;

					> view:nth-child(1) {
						font-size: 28rpx;
					}

					> view:nth-child(2) {
					}

					> view:nth-child(3) {
						display: flex;
						justify-content: space-between;
						align-items: center;

						> view:nth-child(1) {
							padding: 15rpx 0;
							color: #6dca8a;
							font-size: 28rpx;

							text:nth-child(1) {
								font-size: 26rpx;
								color: #6dca8a;
								padding: 0 5rpx 0 0;
							}

							text:nth-child(2) {
								font-size: 24rpx;
								color: #d9d9d9;
								text-decoration: line-through;
								padding: 0 10rpx;
							}
						}

						> view:nth-child(2) {
						}
					}
				}
			}

			> view:nth-child(2) {
				width: 342rpx;
			}
		}
	}
}

.catContent {
	padding: 30rpx;
	height: 100%;
	margin: 0 auto;
	background-color: #fafafa;
}

.checkedStyle {
	height: 90%;
	margin-bottom: 20rpx;
	border-bottom: 1px solid #eee;
}

.cards {
	width: 100%;
	height: 100%;
	background-color: #fff;
}

.cards:last-child {
	padding: 0 0 220rpx 0;
}

.submitBar {
	width: 100%;
	height: 10%;
}

::v-deep .van-submit-bar__bar {
	position: fixed;
	bottom: 170rpx;
	width: 94%;
	background-color: #fff;
}

.chengboxs {
	width: 20px;
	height: 80px;
	margin-top: 55px;
	float: left;
}

.goods-card {
	width: 92%;
	float: right;
}

.checkedStyle .van-checkbox__label {
	width: 100%;
}

.checkedStyle .van-checkbox {
	padding-bottom: 5px;
}

.checkedStyle van-button .van-button--normal {
	width: 100%;
	height: 126px;
}

::v-deep .van-card {
	background-color: #fff !important;
	padding: 16rpx 32rpx 16rpx 0 !important;
}

::v-deep .van-swipe-cell {
	// border-bottom: 1px solid #eee;
}

.submitBar ::v-deep .van-button {
	background-color: #289958 !important;
	border: 0;
}

.submitBar ::v-deep.van-submit-bar__price {
	color: #289958;
}

.shoppingcount {
	position: sticky;
	top: 0rpx;
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	padding: 30rpx;
	background-color: #fff;
	z-index: 100;
}

::v-deep .van-card__content {
	height: 200rpx;
	margin-left: 20rpx;
}

.editshopping {
	color: #ee0a24;
}

.allselect {
	background-color: #f5f5f5;
	border-radius: 10rpx;
	padding: 20rpx 12rpx;
	font-size: 28rpx;
}

.shopping-image {
	width: 190rpx;
	height: 200rpx;
	margin-right: 15rpx;
	border-radius: 15rpx;
}

.jia-jian {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.fuhao-jia {
	background-color: #258e51;
	padding: 10rpx 25rpx;
	border-radius: 5rpx;
	color: #fff;
	margin: 0 10rpx;
}

.fuhao-jian {
	background-color: #fafafa;
	padding: 10rpx 25rpx;
	border-radius: 12rpx;
}

.right-jia {
	margin-left: 20rpx;
}

.count {
	display: flex;
	justify-content: flex-end;
	margin-top: -50rpx;
	color: #aaa;
	// text-align: right;
	// margin-bottom: 15rpx;
}

.shopping-title {
	font-size: 32rpx;
	font-weight: 700;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.shopping-price {
	color: #3db963;
	font-size: 26rpx;
}

.shopping-desc {
	padding: 7rpx 0;
	color: #ccc;
	// background-color: #f6f6f6;
	// width: 150rpx;
}

.shopping-price-top {
	display: flex;
	padding: 5rpx 0;
	font-size: 24rpx;

	.gift {
		padding: 1rpx 15rpx;
		background-color: #ebfaf2;
		border-radius: 5rpx;
		color: #49bd6d;
	}

	.exemption {
		padding: 1rpx 15rpx;
		background-color: #fff3e6;
		border-radius: 5rpx;
		margin: 0 8rpx;
		color: #fca956;
	}

	.wuzhe {
		padding: 1rpx 15rpx;
		background-color: #ffebea;
		border-radius: 5rpx;
		color: #ff8c8b;
	}
}

.storeName {
	// background-color: #eee;
	border-radius: 0 0 12rpx 12rpx;
	padding: 10rpx 5rpx 5rpx;
}

.storeImage {
	width: 50rpx;
	height: 50rpx;
	vertical-align: middle;
	margin: -5rpx 5rpx 0 0;
}

.vip-price {
	margin-top: 10rpx;
	background: url('http://www.szzn.group/uploads/20221107/66affd32dbcd3137929ad4140d445c2f.png') no-repeat;
	background-size: 40% 100%;
	color: #48bd6c;
}

.delete-button {
	height: 280rpx;
	display: flex;
	margin-left: -15rpx;
	flex-direction: column;
	justify-content: center;
	background-color: #fff;

	image {
		width: 150rpx;
		height: 150rpx;
	}
}

// ::v-deep .van-button--mini {
// 	padding: 10rpx 15rpx;
// }
.big {
	display: inline-block;
	width: 15rpx;
	height: 15rpx;
	border-radius: 50%;
	background-color: #289958;
}

.middle {
	display: inline-block;
	width: 10rpx;
	height: 10rpx;
	border-radius: 50%;
	margin: 0 10rpx;
	background-color: #289958;
}

.little {
	display: inline-block;
	width: 8rpx;
	height: 8rpx;
	border-radius: 50%;
	background-color: #289958;
}

.tuijian {
	display: inline-block;
	margin: 0 10rpx;
	font-size: 28rpx;
}

.duiqi {
	display: flex;
	align-items: center;
	justify-content: center;
}

.lijian {
	font-size: 24rpx;
	color: #ccc;
	padding: 5rpx 0;
	width: 300rpx;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.title-name {
	width: 300rpx;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
</style>
